<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar :title="$format(selectBusiness, 'pt_name', '我的')" backgroundColor="#2d3349" inTabBar></tui-navigation-bar>

    <header class="header">
      <!-- <view class="is-flex-col flex-center" @click="$open('/recharge/recharge')">
        <my-icon name="purse" :color="$variables.gold" size="35"></my-icon>
        <view class="fs-xxs mt-5">充值</view>
      </view> -->

      <view class="header-left">
        <view class="avatar-box">
          <!-- <image src="/static/images/default.jpg" class="avatar" mode="aspectFit"></image> -->
          <open-data type="userAvatarUrl" class="avatar"></open-data>
        </view>

        <view class="is-flex-col width-50">
          <view class="fs-xl mb-5">{{ $format(userInfo, 'truename', '暂无昵称') }}</view>
          <!-- <view class="fs-xs">{{ $format(memberInfo, 'time', '') }}</view> -->
          <!-- <view class="is-flex items-center" @click="openEditPhoneModal()" hover-class="hover-shake">
            <view> {{ telphone }}</view>
            <my-icon name="arrow-right" size="12" class="ml-5"></my-icon>
          </view> -->
        </view>
      </view>

      <view class="member-code-box" @click="getMemberCode()">
        <view class="code-box">
          <my-icon name="qrcode" :color="$variables.gold" size="22"></my-icon>
        </view>
        <view class="fs-xxs mt-5">会员码</view>
      </view>

      <view class="member-container">
        <view class="member-left">
          <my-icon name="vip-fill" :color="$variables.gold" size="35"></my-icon>
          <view class="ml-15 is-flex-col justify-between fs-xs">
            <view class="mb-5">{{ $format(memberInfo, 'viptype', '默认会员') }}</view>
            <view class="fs-xxs">{{ $format(memberInfo, 'endtime', 'xxxx-xx-xx') }} 到期</view>
          </view>
        </view>
        <view class="button" hover-class="hover-jump" @click="$msg('text', '该功能暂未开放')">购买会员</view>
      </view>
    </header>

    <view class="box-container">
      <view class="box-item" hover-class="hover-jump" @click="$open('/recharge/recharge')">
        <view class="fs-base">{{ $format(memberAccount, 'money', '0.00') }}</view>
        <view>余额</view>
      </view>

      <view class="box-item" hover-class="hover-jump" @click="$open('/gift-card/gift-card')">
        <view class="fs-base">{{ $format(memberAccount, 'cardtotal', '0') }}</view>
        <view>代金卡</view>
      </view>

      <view class="box-item" hover-class="hover-jump">
        <view class="fs-base">{{ $format(memberAccount, 'integral', '0') }}</view>
        <view>积分</view>
      </view>

      <view class="box-item" hover-class="hover-jump" @click="$open('/coupon/coupon')">
        <view class="fs-base">{{ $format(memberAccount, 'coupontotal', '0') }}</view>
        <view>优惠券</view>
      </view>
    </view>

    <view class="box-container">
      <view class="box-item" hover-class="hover-jump" @click="$open('/storing-wine/storing-wine')">
        <image src="/static/images/user/wine.png" mode="widthFix"></image>
        <view>我的存酒</view>
      </view>

      <view class="box-item" hover-class="hover-jump" @click="getConsume">
        <image src="/static/images/user/consume.png" mode="widthFix"></image>
        <view>消费查询</view>
      </view>

      <view v-if="ifScan" class="box-item" hover-class="hover-jump" @click="handleScan">
        <image src="/static/images/user/scan.png" mode="widthFix"></image>
        <view>扫码点单</view>
      </view>

      <view class="box-item" hover-class="hover-jump" @click="$open('/order/order', 'st')">
        <image src="/static/images/user/order.png" mode="widthFix"></image>
        <view>我的订单</view>
      </view>

      <!-- 占位 -->
      <view v-if="!ifScan" class="box-item"></view>
    </view>

    <section class="quick-container">
      <my-row icon="info" title="个人资料" value="" :color="$variables.gold" padding="15px;" boxBorder arrow @click.native="openEditUserInfoModal"></my-row>

      <my-row icon="contact" title="联系客服" value="" :color="$variables.gold" padding="15px;" boxBorder arrow @click.native="callPhone()"></my-row>

      <!-- <view class="is-relative">
        <my-row icon="contact" title="联系客服" value="" :color="$variables.gold" padding="15px;" boxBorder arrow @click.native="$open('/storing-wine/storing-wine')"></my-row>
        <button open-type="contact" class="contact">联系客服</button>
      </view> -->
    </section>

    <!-- 占位高度  -->
    <view style="height: 50px"></view>

    <my-loading ref="loading"></my-loading>

    <!-- 修改手机号 -->
    <modal-edit-phone ref="editPhoneModal" @send="sendPhoneCode"></modal-edit-phone>
    <modal-edit-user-info ref="editUserInfoModal" @success="handleInit"></modal-edit-user-info>
    <modal-scan ref="scanModal" @success="finalGetConsumeDetail"></modal-scan>

    <!-- 消费详情 -->
    <modal-consume-detail ref="consumeDetailModal" @afterModalClose="afterConsumeDetailModalClose"></modal-consume-detail>

    <!-- 会员码组件 -->
    <modal-code ref="codeModal" :qrcode="qrcode"></modal-code>

    <my-tabbar ref="tabBar"></my-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      $variables: this.$variables,
      // 会员二维码
      qrcode: null,
      // 用户信息
      memberInfo: null,
      // 会员权益
      memberAccount: null,
      userInfo: null
    }
  },
  computed: {
    telphone() {
      const telphone = this.$format(this.memberInfo, 'telphone', '')
      if (!telphone) return ''
      const reg = /^(\d{3})\d{4}(\d{4})$/
      return telphone.replace(reg, '$1****$2')
    },
    selectBusiness() {
      return this.$store.getters.selectBusiness
    },
    // 控制是否显示扫码点单
    ifScan() {
      return this.$store.getters.ifScan
    }
  },
  onShow() {
    uni.hideTabBar()
    this.handleInit()
  },
  onPullDownRefresh() {
    this.$refs.loading.open()
    this.handleInit()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.$refs.loading.close()
    }, 300)
  },
  methods: {
    handleInit() {
      this.initLoginInfo().then(async () => {
        await this.finalGetMemberInfo()
        this.memberAccount = await this.getMemberAccount()
        this.userInfo = await this.getUserInfo()
        // console.res('用户授权获取详细信息', this.userInfo)
      })
    },

    handleScan() {
      this.$refs.tabBar.openScan()
    },
    afterConsumeDetailModalClose() {
      this.$refs.scanModal.close()
    },
    getConsume() {
      this.$refs.scanModal.open()
    },
    openEditUserInfoModal() {
      this.$refs.editUserInfoModal.open({ memberInfo: this.memberInfo })
    },
    openEditPhoneModal() {
      this.$refs.editPhoneModal.open()
    },

    getUserInfo() {
      return new Promise(resolve => {
        const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
        if (!baseParam) return
        Object.assign(baseParam, { type: 'check' })
        this.$api.editUserInfo(baseParam).then(res => {
          console.res('个人中心查询/修改资料', res)
          resolve(this.$format(res, 'data'))
        })
      })
    },

    // 获取会员资料信息
    async finalGetMemberInfo() {
      try {
        const res = await this.getMemberInfo()
        this.memberInfo = this.$format(res, 'data')
        // console.res('获取会员资料信息', this.memberInfo)
        return Promise.resolve()
      } catch (err) {
        console.err('获取会员资料信息', err)
        this.$msg('text', this.$format(err, 'msg', '获取用户数据失败'))
        return Promise.reject()
      }
    },

    // 获取会员二维码
    getMemberCode() {
      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return

      console.param('获取会员二维码', baseParam)
      this.$api
        .getMemberCode(baseParam)
        .then(res => {
          console.res('获取会员二维码', res)
          const qrcode = this.$format(res, 'qrcode')
          if (!qrcode) return this.$msg('err', '获取失败')
          this.qrcode = qrcode ? this.$utils.base64Img(qrcode) : qrcode
          this.$refs.codeModal.open()
        })
        .catch(err => {
          console.err('获取会员二维码', err)
          this.errMsg(err, '获取会员二维码失败')
        })
    },
    callPhone() {
      const tel = this.$format(this.selectBusiness, 'tel')
      if (!tel) return this.$msg('text', '电话号码为空')
      uni.makePhoneCall({ phoneNumber: tel })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.page {
  color: $color-primary-grey-text;

  $consumeContainerHeight: 85vh;
  $headerHeight: 40px;
  $footerHeight: 80px;
  ::v-deep .consume-container {
    height: calc(#{$consumeContainerHeight} - #{$headerHeight} - #{$footerHeight});

    $modalHeaderHeight: 40px;
    $modalFooterHeight: 80px;
    .row-container {
      height: calc(#{$consumeContainerHeight} - #{$headerHeight} - #{$footerHeight} - #{$modalHeaderHeight} - #{$modalFooterHeight});
    }
  }
}

.header {
  background: #2d3349;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0 0 30px 30px;
  @include is-flex(row, space-between, center, wrap);
  padding: 20px 20px 0px 20px;
  margin-bottom: 20px;
  overflow: hidden;
  .avatar-box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    .avatar {
      width: 100%;
      height: 100%;
    }
  }
  .header-left {
    width: 80%;
    @include is-flex(row, flex-start, center, nowrap);
  }

  .member-code-box {
    @include is-flex(column, center, center, nowrap);

    .code-box {
      background: #3a3f51;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      @include is-flex(row, center, center, nowrap);
    }
  }

  .member-container {
    width: 100%;
    background: linear-gradient(-90deg, rgba(70, 78, 105, 0.99), rgba(32, 39, 61, 0.99));
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    padding: 15px 15px;
    border-radius: 10px 10px 0 0;
    margin-top: 30px;
    @include is-flex(row, space-between, center, nowrap);
    .member-left {
      display: flex;
      flex: 1;
      align-items: center;
    }

    .button {
      padding: 0px 12px;
      height: 35px;
      line-height: 35px;
      background: linear-gradient(180deg, #ffedcb, #f1c99a);
      color: #131828;
      border-radius: 40px;
      font-size: $font-size-xs;
      width: 30%;
      text-align: center;
      margin-left: 20px;
    }
  }
}

.box-container {
  background: $color-primary-modal-bg;
  border-radius: 5px;
  margin: 20px 15px;
  padding: 15px 10px;
  font-size: $font-size-xs;
  @include is-flex(row, space-between, center, wrap);
}

.box-item {
  width: 25%;
  @include is-flex(column, space-between, center, nowrap);
  view:first-child {
    color: $gold;
    margin-bottom: 2px;
  }

  image {
    width: 40px;
    margin-bottom: 10px;
  }
}

.quick-container {
  margin: 20px 15px;
  background: $color-primary-modal-bg;
  border-radius: 5px;
}

.contact {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  width: 100%;
  z-index: 99;
}
</style>
